<!-- html -->
<template>
  <h2 class="h2">v-if，条件渲染</h2>
  <button class="button1" @click="showNext">下一张图片</button>
  <br>
  <img class="img1" v-bind:src="img1" v-if="index == 1">
  <img class="img1" v-bind:src="img2" v-else-if="index == 2">
  <span class="span2" v-else="index > 2">浏览结束</span>
</template>

<!-- js或ts -->
<script lang="ts">
export default {
  name: 'vifTest1'
}
</script>

<!-- js或ts -->
<script setup lang="ts">
import { ref } from 'vue'
import img1 from '@/assets/img/测试图片1.jpg'
import img2 from '@/assets/img/测试图片2.jpg'
//数据
let index = ref(1)
//方法
function showNext() {
  index.value += 1
}
</script>

<!-- 样式 -->
<style scoped></style>